<template>
  <div class="Mycarview">
    <Head msg="车源预览"></Head>
    <!--        <img :src="collect?publicPath+'img/icons/icon-collect-success.png':publicPath+'img/icons/icon-collect-real.png'"-->
    <!--             class="collect-img" @click="doCollect">-->
    <div class="detail-main">
      <div class="detail-title">
        {{ goodsinfo.goods_name }}
      </div>
      <!--            <div class="detail-list" v-for="item in paramList">-->
      <!--                {{item.param_name}}：<span class="detail-text">{{item.param_value}}</span>-->
      <!--            </div>-->
      <div class="detail-list">
        车型年份：<span class="detail-text">{{ goodsinfo.setparam.year }}</span>
      </div>
      <div class="detail-list">
        外观颜色：<span class="detail-text">{{
          goodsinfo.setparam.out_color
        }}</span>
      </div>
      <div class="detail-list">
        内饰颜色：<span class="detail-text">{{
          goodsinfo.setparam.in_color
        }}</span>
      </div>
      <div class="detail-list">
        车辆类型：<span class="detail-text"
          >{{ goodsinfo.setparam.type }}-{{ goodsinfo.setparam.mold }}</span
        >
      </div>
      <div class="detail-list">
        汽车排量：<span class="detail-text">{{
          goodsinfo.setparam.output
        }}</span>
      </div>
      <div class="detail-list">
        排放标准：<span class="detail-text">{{
          goodsinfo.setparam.emission
        }}</span>
      </div>
      <div class="detail-list">
        车源地址：<span class="detail-text">{{ goodsinfo.setparam.area }}</span>
      </div>
      <div class="detail-list">
        指导价格：<span class="detail-text"
          >{{ goodsinfo.market_price }}万</span
        >
      </div>
      <div class="detail-list">
        经销商价：<span class="detail-text">{{ goodsinfo.goods_price }}万</span>
      </div>
      <div class="detail-list">
        待售数量：<span class="detail-text">{{ goodsinfo.store_count }}</span>
      </div>
      <div class="detail-list">
        有效期限：<span class="detail-text" style="font-size: 14px"
          >{{ goodsinfo.setparam.start_time }} 至
          {{ goodsinfo.setparam.end_time }}</span
        >
      </div>
      <div class="detail-content">
        车辆配置：<span class="detail-text">{{
          goodsinfo.setparam.setting
        }}</span>
      </div>
      <div class="detail-images">
        <div class="detail-images-title">车辆图片：</div>
        <div class="detail-pics">
          <img
            :key="imgs"
            @click="handleImgsClick(index)"
            v-for="(imgs, index) in images"
            :src="imgs"
          />
        </div>
      </div>
      <!--广告图-->
      <!--            <cube-slide :showDots="false" ref="slide" :data="goodsinfo.advLip">-->
      <!--                <cube-slide-item v-for="(item, index) in goodsinfo.advLip" :key="index">-->
      <!--                    &lt;!&ndash;                    <a :href="item.url">&ndash;&gt;-->
      <!--                    <img :src="item.imgurl">-->
      <!--                    &lt;!&ndash;                    </a>&ndash;&gt;-->
      <!--                </cube-slide-item>-->
      <!--            </cube-slide>-->
      <!--            <img class="ad-img" src="../../public/img/icons/icon-ad.jpg"/>-->
      <!--            <div class="detail-bottom">-->
      <!--                <div>访问量({{goodsinfo.view}})</div>-->
      <!--                <div>电话咨询量({{goodsinfo.tel_count}})</div>-->
      <!--                <div>预约咨询量({{goodsinfo.dep_count}})</div>-->
      <!--            </div>-->
    </div>
    <!--        <div class="detail-foot">-->
    <!--            <div class="foot-btn">-->
    <!--                <img src="../../public/img/icons/icon-Complaint.png">-->
    <!--                <a :href="'tel:'+config.tel">投诉/举报</a>-->
    <!--            </div>-->
    <!--            <div class="foot-btn">-->
    <!--                <img src="../../public/img/icons/icon-tel.png">-->
    <!--                <a :href="'tel:'+config.tel">联系电话</a>-->
    <!--            </div>-->
    <!--            <div class="foot-btn" @click="makeDatement">-->
    <!--                <img src="../../public/img/icons/icon-about.png">-->
    <!--                <div>预约咨询</div>-->
    <!--            </div>-->
    <!--        </div>-->
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
import Head from '@/components/Head.vue';
import ImagePreview from 'cube-ui/src/components/image-preview/image-preview.vue';

@Component({
  components: {
    ImagePreview,
    Head,
  },
})
export default class Mycarview extends Sence {
  private publicPath: string = process.env.BASE_URL;
  public images: any = []; // 图片数据
  public goodsinfo: any = {}; // 商品详情数据
  public paramList: any = []; // 车辆配置
  public initialIndex: number = 0; // 图片索引
  public config: any = {}; // 配置数据
  public collect: boolean = false;
  public id: any = '';
  public mobile: any;

  public mounted(): void {
    this.id = this.$route.query.id;
    this.getUserCar();
  }

  // 获取商品详情接口
  public getUserCar(): void {
    this.post('api/v1/getUserCar', {
      goods_id: this.id,
    }).then((res: any) => {
      this.goodsinfo = res.data.info;
      this.images = res.data.info.total_image;
    });
  }

  // 点击图片展示效果
  public handleImgsClick(index: number) {
    this.initialIndex = index;
    const params: any = {
      $props: {
        imgs: this.images,
        initialIndex: 'initialIndex', // 响应式数据的key名
      },
      $events: {
        change: (i: number) => {
          // 必须更新 initialIndex
          this.initialIndex = i;
        },
      },
    };
    (<any>this).$createImagePreview({ ...params }).show();
  }
}
</script>

<style scoped lang="stylus">
*
    text-align left

.cube-slide-item
    > img
        width 100vw
        height 100%

.collect-img
    position absolute
    width 25px
    height 25px
    top 10px
    right 20px

.detail-content
    padding 8px 15px
    line-height 25px
    font-size 16px
    font-weight bold
    color #989797
    border-bottom 3px solid white

    .detail-text
        color black


.detail-foot
    position fixed
    bottom 0
    width 100vw
    background white
    display flex
    flex-direction row
    justify-content space-around
    height 50px
    align-items center

    .foot-btn
        display flex
        flex-direction row
        padding 3px 5px
        border 1px solid #515151
        align-items center

        > img
            width 20px
            height 20px
            margin-right 5px

        > div
        > a
            color #333
            font-size 14px

.detail-main
    /*min-height 100vh*/
    /*padding-bottom 50px*/
    display flex
    flex-direction column
    background #cac9c9

    .detail-bottom
        display flex
        flex-direction row
        justify-content space-around
        padding 15px

        > div
            font-size: 14px
            color #989797
            font-weight bold

    .ad-img
        width 100vw
        height 100%
        border-bottom 3px solid white

    .detail-title
        padding 10px 15px
        line-height 24px
        font-size 18px
        font-weight bold
        border-bottom 8px solid white

    .detail-list
        height 40px
        line-height 43px
        padding 0 15px
        font-size 16px
        font-weight bold
        color #989797
        border-bottom 3px solid white

        .detail-text
            color black

    .detail-images
        display flex
        flex-direction column
        padding 10px 15px
        /*border-bottom 3px solid white*/

    .detail-images-title
        color #989797
        font-weight bold
        margin-bottom 10px

    .detail-pics
        display flex
        flex-direction row
        flex-wrap wrap

        > img
            width 20vw
            height 15vw
            margin-right 10px
</style>
